<template>
	<view class="page">
		<swiper indicator-dots indicator-active-color="#FFFFFF" style="height: 462rpx;" circular autoplay>
			<swiper-item v-for="item,index in this.detail.banner.split(',')" :key="index">
				<image :src="item" class="foodImg"></image>
			</swiper-item>
			<!-- 	<image src="../../static/307.png" mode=""></image> -->
		</swiper>
		<view class="content">
			<view class="flex title">
				<view class="titleText" style="height: auto;">{{detail.name}}</view>
				<view class="flex center distance">
					<!-- <image src="../../static/index/map.png" class="map"></image>
					<view>距离1.0km</view> -->
				</view>
			</view>
			<view class="flex organization">
				<image v-if="detail.platformType==2 || detail.platformType==5" src="../../static/index/mtLogo.png"
					class="mtLogo"></image>
				<image v-if="detail.platformType==1" src="../../static/index/blueOrdering.png" class="mtLogo">
				</image>
				<image v-if="detail.platformType==3 || detail.platformType==9" src="../../static/index/392.png"
					class="mtLogo"></image>
				<image v-if="detail.platformType==4" src="../../static/index/391.png" class="mtLogo">
				</image>
				<image v-if="detail.platformType==6" src="../../static/index/393.png" class="mtLogo">
				</image>
				<image v-if="detail.platformType==7" src="../../static/index/394.png" class="mtLogo">
				</image>
				<image v-if="detail.platformType==8" src="../../static/index/395.png" class="mtLogo">
				</image>
				<view class="yellowBox" style="margin-left: 14rpx;" v-for="(tag,index) in detail.tagsList" :key="index">
					{{tag}}
				</view>
			</view>
			<view class="flex organization" style="padding-left: 40rpx;">
				{{isVip?'会员返'+detail.vipReturnAmount:'返'+detail.returnAmount}}元
			</view>
			<view class="site">店铺地址：{{detail.shopAddress ||'暂无地址信息'}}</view>
		</view>
		<view class="flex center countDown">
			<view class="flex center time">
				<view>报名剩余时间:</view>
				<uni-countdown :day="days" :hour="hours" :minute="mins" :second="secs" :show-colon="false"
					ref="countdown" />
			</view>
			<view><text class="peopleNum">{{getValue(detail,'taskMemberVOList').length ||0}}</text>人已申请</view>
			<view class="flex avatarBox">
				<image :src="img.userCover" class="avatar" v-for="(img,index) in detail.taskMemberVOList" :key="index">
				</image>
			</view>
			<view class="flex center">
				<view class="schedule">
					<view class="scheduleIng" :style="{width:widthNum(detail)+'%'}">
					</view>
				</view>
				<view class="residue">今日剩余<text class="residueNum">{{detail.remainCount||0}}</text>份</view>
			</view>
		</view>
		<view class="ruleBox">
			<view class="ruleTitle">活动规则</view>
			<rich-text :nodes="detail.msg"></rich-text>
		</view>
		<view class="flex foot">
			<button open-type="share" class="flex">
				<image src="../../static/index/share.png" class="shareImg"></image>
				<view style="flex-shrink: 0;">分享</view>
			</button>
			<view class="" v-if='detail.remainCount==0'>
				<view class="applyBtn" style="background: #ccc;" @click="jumpto">名额已空 </view>
			</view>
			<view class="" v-else>
				<view class="applyBtn" v-if="secs>0&&!detail.involvement" @click="applyClick">申请名额</view>
				<view class="applyBtn" v-else-if="detail.involvement" style="background: #ccc;" @click="jumpto">
					已申请名额(去上传凭证) </view>
				<view class="applyBtn" v-else style="background: #ccc;">活动已截止</view>
			</view>
		</view>
		<alert :popupMask="popupMask" :popup="popup" @close="close" @sub="sub" :askShouldMsg="askShouldMsg" ref="alert">
		</alert>
	</view>
</template>
<script>
	import alert from '@/components/alert.vue'
	import {
		robTask,
		taskDetail
	} from '../../common/api.js'
	import {
		getValue,
		buildImgUrl
	} from '../../utils/me.js'
	export default {
		components: {
			alert
		},
		data() {
			return {
				getValue,
				buildImgUrl,
				// 倒计时
				testHour: 1,
				testMinute: 0,
				testSecond: 0,
				start: false,
				timeupSecond: 10,
				popupMask: false,
				popup: false,
				id: '',
				detail: {},
				days: 0,
				hours: 0,
				mins: 0,
				secs: 0,
				askShouldMsg: '',
				isVip: false
			}
		},
		onLoad(option) {
			this.id = option.id
			this.isVip = uni.getStorageSync('isVip')
			this.taskDetail()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '快来一起干饭',
				path: '/pages/index/detail?id=' + this.id
			}
		},
		mounted() {
			setTimeout(() => {
				this.testHour = 1
				this.testMinute = 1
				this.testSecond = 0
				this.start = true
			}, 3000)
			setTimeout(() => {
				this.start = false
			}, 10000)
		},
		methods: {
			//挑战
			jumpto() {
				if (!uni.getStorageSync('token')) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/info/info'
						})
					}, 1000)
					return;
				}
				uni.setStorageSync('index', 1);
				uni.switchTab({
					url: '/pages/order/order?index=1'
				});
			},
			widthNum(item) {
				return ((Number(item.count) - Number(item.remainCount)) / Number(item.count)) * 100
			},
			getDiffTime(new_date, old_date) {
				var subtime = (new_date - old_date) / 1000; //计算时间差,并将毫秒转化为秒
				this.days = parseInt(subtime / 86400); //天  24*60*60*1000
				this.hours = parseInt(subtime / 3600) - 24 * this.days; //小时  60*60  总小时数-过去小时数=现在小时数
				this.mins = parseInt(subtime % 3600 / 60); //分钟 - (day*24)  以60秒为一整份  取余 剩下秒数 秒数/60就是分钟数
				this.secs = parseInt(subtime % 60); //以60秒为一整份  取余  剩下秒数
				// return "时间差是：" + days + "天 " + hours + "小时 " + mins + "分钟 " + secs + "秒 ";
			},
			taskDetail() {
				taskDetail({
					id: this.id
				}).then(res => {
					this.detail = res.result
					this.detail.tagsList = this.detail.tags ? this.detail.tags.split(',') : []
					this.askShouldMsg = res.result.askShouldMsg
					var now = new Date();
					let data = now.getFullYear() + '/' + Number(now.getMonth() + 1) + '/' + Number(now.getDate() +
						1) + ' ' + '00:00:01'
					let time = this.getDiffTime(new Date(data).getTime(), +new Date())
					this.$nextTick(() => {
						this.$refs.countdown.update()
					})
				})
			},
			robOrder() {
				robTask({
					taskId: this.id,
					userId: uni.getStorageSync('userInfo').id
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 3000
					})
					if (res.success) {
						uni.requestSubscribeMessage({
							tmplIds: ['C9ye5cUROva4mOY38abeu6bfqqLM9qTTsa4sXu-ER-E',
								'opW4p1LsNwrVEa5yOE8lXOhYOYphvlgyADOxZJ_GPOQ'
							],
							success(res) {
								console.log(res)
							}
						})
						setTimeout(() => {
							uni.navigateTo({
								url: './activityProcess?id=' + res.result.id
							})
						}, 500)
					}
				})
			},
			applyClick() {
				if (!uni.getStorageSync('token')) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/info/info'
						})
					}, 1000)
					return;
				}
				this.popupMask = true
				this.popup = true
			},
			sub() {
				this.popupMask = false
				this.popup = false
				uni.showLoading()
				setTimeout(() => {
					this.robOrder()
				}, 500)
			},
			close() {
				this.popupMask = false
				this.popup = false
			},
			leavea(item) {
				this.popup = true
				this.popupId = item.id
				this.title = "留件"
				this.$refs.alert.setTenant();
			},
			sendBack(item) {
				this.popup = true
				this.popupId = item.id
				this.title = "寄回单号"
				this.$refs.alert.setTenant();
			},
			upTime(min) {
				this.jishiStart = true;
				this.$nextTick(() => {
					this.jishiMin = min
					this.jishiSs = 0
					this.jishiStart = false
					this.$refs.countdown.update()
				})
			},
			timeup() {
				uni.showToast({
					title: '时间到'
				})
				this.timeupSecond = 29
			}
		}
	}
</script>
<style scoped>
	.yellowBox {
		background: #FDCC45;
		padding: 4rpx 10rpx 6rpx;
		font-family: Source Han Sans CN;
		font-size: 24rpx;
		font-weight: 500;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #FFFFFF;
		border-radius: 12rpx;
	}

	button {
		border: none;
		background: none;
		align-items: center;
	}

	button::after {
		border: none !important;
	}

	.applyBtn {
		width: 496rpx;
		height: 86rpx;
		border-radius: 52rpx;
		opacity: 1;
		background: #FD4545;
		font-family: Source Han Sans CN;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 86rpx;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #FFFFFF;
		text-align: center;
	}

	.shareImg {
		width: 48rpx;
		height: 48rpx;
		margin-right: 26rpx;
	}

	.foot {
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
		width: 682rpx;
		height: 140rpx;
		background: #fff;
		font-family: Source Han Sans CN;
		font-size: 32rpx;
		font-weight: bold;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #333333;
		align-items: center;
		justify-content: space-between;
		padding: 0 12rpx 0 56rpx;
		border-top: 2rpx solid #EDEDED;
	}

	.ruleH3 {
		margin: 20rpx 0 10rpx;
	}

	.ruleTitle {
		font-family: Source Han Sans CN;
		font-size: 32rpx;
		font-weight: bold;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #333333;
		text-align: center;
		margin-bottom: 18rpx;
	}

	.ruleBox {
		width: 658rpx;
		height: auto;
		padding: 34rpx 30rpx;
		font-family: Source Han Sans CN;
		font-size: 24rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #333333;
		background: #FFFFFF;
		margin: 20rpx 18rpx;
		/* #ifdef MP-WEIXIN */
		margin-bottom: 140rpx;
		/* #endif */
	}

	.residueNum {
		font-family: Source Han Sans CN;
		font-weight: 900;
		font-size: 28rpx;
		font-variation-settings: "opsz" auto;
		color: #FD4545
	}

	.residue {
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		font-variation-settings: "opsz" auto;
		color: #999999
	}

	.time {
		margin-bottom: 32rpx;
	}

	.peopleNum {
		font-family: Source Han Sans CN;
		font-size: 48rpx;
		font-weight: bold;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #FD4545;
		margin-top: 50rpx;
	}

	.avatarBox {
		margin: 18rpx 0;
	}

	.countDown {
		width: 718rpx;
		height: 264rpx;
		padding: 26rpx 0;
		flex-direction: column;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 18rpx;
		font-family: Source Han Sans CN;
		font-size: 28rpx;
		font-weight: bold;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #333333;
	}

	.avatar {
		width: 52rpx;
		height: 52rpx;
		margin: 0 16rpx;
	}

	.scheduleIng {
		position: absolute;
		width: 30%;
		height: 18rpx;
		background: #FDCC45;
		border-radius: 12rpx;
	}

	.schedule {
		position: relative;
		width: 174rpx;
		height: 18rpx;
		background: rgba(253, 204, 69, 0.3);
		margin-right: 6rpx;
		border-radius: 12rpx;
		margin-top: 4rpx;
	}

	.site {
		padding: 0 22rpx 0 34rpx;
	}

	.organization {
		font-family: Source Han Sans CN;
		font-size: 28rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		height: 76rpx;
		line-height: 76rpx;
		border-bottom: 2rpx solid #F3F3F3;
		align-items: center;
		margin-bottom: 18rpx;
	}

	.distance {
		font-family: Source Han Sans CN;
		font-size: 24rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #999999;
		padding-top: 8rpx;
	}

	.title {
		padding: 0 22rpx 0 34rpx;
		border-bottom: 2rpx dashed #999999;
		justify-content: space-between;
	}

	.titleText {
		font-family: Source Han Sans CN;
		font-size: 32rpx;
		font-weight: bold;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #333333;
		height: 72rpx;
		line-height: 72rpx;
	}

	.map {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}

	.mtLogo {
		width: 44rpx;
		height: 44rpx;
		margin: 0 18rpx 0 34rpx;
	}

	.content {
		margin-top: -72rpx;
		width: 718rpx;
		min-height: 264rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 20rpx;
		position: relative;
		margin-left: 18rpx;
		font-family: Source Han Sans CN;
		font-size: 24rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #333333;
		padding-bottom: 20rpx;
	}

	.foodImg {
		height: 462rpx;
		width: 100%;
	}

	.page {
		background: #F7F7F7;
		padding-bottom: 100rpx;
	}

	page {
		background: #F7F7F7;
	}
</style>